<template>
  <div id="Header">
      {{title}}
  </div>
</template>

<script>
export default {
    // 提高组件复用性
    props:{
        // 声明title自定义属性，允许使用者自定义标题的内容
        title:{
            default:'购物车',
            type:String
        }
    }
}
</script>

<style>
    #Header{
        font-size: 12px;
        height: 45px;
        width: 100%;
        background-color: #1d7bff;
        display: flex;
        /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
        justify-content: center;
        /* 使用 align-content 属性对齐交叉轴上的各项（垂直） */
        /* align-items弹性盒子元素在该行的侧轴（纵轴）上居中放置。 */
        align-items: center;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
</style>